<template>
  <div>
    <div class="side-search-container">
      <a-input-group compact>
        <a-select v-model:value="witchSelect" @change="onSwitchChange" class="compact-first-select">
          <a-select-option value="moNo">{{$t('hangManage.makeNo')}}</a-select-option>
          <a-select-option value="status">{{$t('common.state')}}</a-select-option>
          <a-select-option value="styleNo">{{$t('basicData.styleNo')}}</a-select-option>
        </a-select>
        <a-input style="width: 182px" :placeholder="$t('common.pleaseInput')" v-if="witchSelect == 'moNo'" v-model:value.trim="params.moNo" @keyup.enter="loadData(true)" />
        <a-input style="width: 182px" :placeholder="$t('common.pleaseInput')" v-else-if="witchSelect=='styleNo'" v-model:value.trim="params.styleNo" @keyup.enter="loadData(true)" />
        <a-select v-model:value="params.status"  :placeholder="$t('common.pleaseSelect')" class="compact-last-select" v-else @change="loadData(true)">
          <a-select-option v-for="(item, index) in queryStatusOptions" :value="item.value" :key="index">{{item.key}}</a-select-option>
        </a-select>
      </a-input-group>
    </div>
    <a-spin :spinning="loading">
      <div :class="['make-list-side-container', { 'isLocal':isEnvLocal}]" @scroll="scrollBottom">
        <a-row v-for="(item, index) in listData" :key="index" :class="['list-card', {'active-card' : selectMakeId == item.id}]" @click="onCardClick(item, index)">
          <a-col :span="16" class="mb-12">{{index+1}}<b class="break-all">【{{item.moNo}}】</b></a-col>
          <a-col :span="8" class="text-right mb-12">
            <span v-if="props.sideType == 'online'" class="text-primary" @click="schDetail(item)">
              {{ $t('other.lookInfo') }}
              <RightOutlined />
            </span>
            <a-tag v-else :color="item.status == 1? 'processing' : item.status == 2? 'success': 'warning'" class="mr-0">
              {{item.status == 1?$t('other.inProduct'): item.status == 2? $t('sysManage.completed'): $t('other.unProduction')}}
            </a-tag>
          </a-col>
          <a-col :span="14" class="mb-8"> {{$t('basicData.styleNo')}}：{{item.styleNo}} </a-col>
          <a-col :span="10" class="mb-8">
            <span v-if="props.sideType == 'route'">{{$t('common.verNumber')}}:{{`${item.moProcRoadmapVersionVO ? item.moProcRoadmapVersionVO.length : 0} ${$t('common.piece')}`}}</span>
            <span v-if="props.sideType == 'proc'">{{$t('common.verNumber')}}:{{`${item.moProcVersionVOList ? item.moProcVersionVOList.length : 0} ${$t('common.piece')}`}}</span>
            <span v-if="props.sideType == 'local'">{{ $t('other.apply') }}:{{`${item.autoRoadmapRecordVOList ? item.autoRoadmapRecordVOList.length : 0} ${$t('common.piece')}`}}</span>
            <span v-if="props.sideType == 'online'">{{ $t('other.apply') }}:{{`${item.ieRoadmapRecordVOList ? item.ieRoadmapRecordVOList.length : 0} ${$t('common.piece')}`}}</span>
          </a-col>
          <a-col :span="24" class="mb-8">{{$t('basicData.styleNa')}}：{{item.styleName}}</a-col>
          <a-col :span="24" class="mb-8" v-if="selectMakeId == item.id">{{$t('common.createTime')}}：{{formatTime(item.createTime, 'YYYY-MM-DD HH:mm:ss')}}</a-col>
          <a-col :span="24" v-if="selectMakeId == item.id">{{$t('common.lastEditTime')}}：{{formatTime(item.updateTime, 'YYYY-MM-DD HH:mm:ss')}}</a-col>
        </a-row>
        <a-empty v-if="!listData.length" class="mt-50" />
      </div>
    </a-spin>
  </div>

</template>
<script setup name="makeListSide">
import { formatTime } from '@/utils'
import { queryStatusOptions } from './processConfig'
import axios from '@/utils/request'
import { onBeforeMount, ref } from 'vue'
import { RightOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  sideType: {
    type: String,
    default: () => ''
  },
  listUrl: {
    type: String,
    default: () => ''
  },
  isSchedule: {
    type: Boolean,
    default: () => false
  },
  isEnvLocal: {
    type: Boolean,
    default: () => false
  }
})
const emits = defineEmits(['onSelect'])
let listData = ref([])
let currentPage = ref(1)
let selectMakeId = ref(null)
let loading = ref(false)
let witchSelect = ref('moNo')
let noMore = ref(false)
let params = ref({})
let cardIndex = ref(0)
const schDetail = (schDetail) => {
  router.push({
    path: '/makeManage/makeList/details',
    query: { id: schDetail.id, 'type': 'sch' }
  })

}

const getQueryParams = () => {
  return {
    pageNo: currentPage.value,
    pageSize: 20,
    moNo: witchSelect.value == 'moNo' ? params.value.moNo : null,
    styleNo: witchSelect.value == 'styleNo' ? params.value.styleNo : null,
    status: witchSelect.value == 'status' ? params.value.status : null
  }
}
const loadData = async (reset) => {
  // console.log("🚀 ~ file: makeListSide.vue ~ line 70 ~ loadData ~ reset", reset)
  if (reset) {
    noMore.value = false
    currentPage.value = 1
  }
  let params = getQueryParams()
  // {{$t('common.see')}}{{$t('common.piece')}}件
  loading.value = true
  try {
    let res = await axios.postAction(props.listUrl, params)
    if (res.success) {
      if (res.data) {
        if (reset) {
          listData.value = res.data.list || []
          if (listData.value.length) {
            selectMakeId.value = listData.value[cardIndex.value].id
            emits('onSelect', listData.value[cardIndex.value])
            // selectMakeId.value = listData.value[0].id
            // emits('onSelect', listData.value[0])
          }
        } else {
          listData.value = [...listData.value, ...res.data.list]
        }
        noMore.value = listData.value.length >= res.data.total
      } else {
        if (reset) listData.value = []
        noMore.value = true

        selectMakeId.value = null
        emits('onSelect', { selectMakeId: null, moProcVersionVOList: [] })
      }
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
const scrollBottom = async (e) => {
  const { scrollTop, scrollHeight, clientHeight } = e.srcElement
  // 滚动距离顶部高度 + 可视区域高度 >= 滚动内容高度，说明滚动到底
  if (scrollTop + clientHeight >= scrollHeight) {
    if (noMore.value) return
    currentPage.value++
    await loadData()
  }
}
const onSwitchChange = () => {
  params.value = {}
  noMore.value = false
}
const onCardClick = (record, index) => {
  cardIndex.value = index || 0
  selectMakeId.value = record.id
  emits('onSelect', record)
}
defineExpose({
  loadData
})
onBeforeMount(() => {
  witchSelect.value = 'moNo'
  loadData(true)
})
</script>
